/
<template>
  <div class="content-outer">
    <Block class="content-head">
      <div class="search-form">
        <div class="search-item">
          <div class="item-label">分销方名称</div>
          <div class="item-content">
            <el-input v-model="formData.name" clearable placeholder="请输入分销方名称"></el-input>
          </div>
        </div>
        <div class="search-item">
          <el-button style="margin-left: 10px" type="primary" :loading="loading" @click="onSubmit">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>
    </Block>
    <Block class="content-table">
      <div class="action-box">
        <div class="left"></div>
        <div class="right">
          <el-button v-permission:cooperate-index-add type="primary" @click="add('新增')">新增分销方</el-button>
        </div>
      </div>
      <div class="table-table">
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        >
          <template #type="{ row }"> 分销方 </template>
          <template #account="{ row }">
            <el-button type="text" size="medium" @click="onlogin(row)">{{ row.account }}</el-button>
          </template>
          <template #status="{ row }">
            <el-switch
              v-model="row.status"
              active-value="1"
              inactive-value="2"
              @change="ondistributorStatus(row.id, row.status)"
            >
            </el-switch>
          </template>
          <template #name="{ row }">
            <div class="setname" style="display: flex; align-items: center">
              <div v-if="row.id != isSetRemarkId" class="remark">{{ row.name }}</div>
              <el-input
                v-if="row.id == isSetRemarkId"
                v-model="row.name"
                clearable
                style="width: 190px"
                placeholder="请输入内容"
                maxlength="40"
              ></el-input>
              <!-- <div class="status-drop-box">
                <i
                  v-if="row.id != isSetRemarkId"
                  class="el-icon-edit set_remark edit-icon"
                  @click="onSetRemark(row)"
                ></i>
              </div> -->
              <el-button
                v-if="row.id == isSetRemarkId"
                type="text"
                size="medium"
                style="margin-left: 10px"
                @click="onSaveRemark(row.name)"
                >保存</el-button
              >
              <el-button
                v-if="row.id == isSetRemarkId"
                type="text"
                size="medium"
                style="color: #666"
                @click="isSetRemarkId = ''"
                >取消</el-button
              >
            </div>
          </template>
          <template #zip="{ row }">
            <el-button type="text" size="medium" @click="onEdit(row)">编辑</el-button>
            <el-button type="text" size="medium" @click="oncopy(row)">复制秘钥</el-button>
            <!-- <el-button
              type="text"
              size="medium"
              @click="onLog(row)"
            >日志</el-button> -->
          </template>
        </BiTable>
      </div>
    </Block>
    <BiDrawer
      v-model="drawer.visible"
      :drawer-title="drawer.title"
      :row="drawer.row"
      :component="AddCooperateVue"
      drawer-size="400px"
      @ok="onSuccess"
    ></BiDrawer>
    <BiLog :value="log_info.visible" size="50%" :log-id="log_info.id" :model="'partner'" @onclose="onclose"></BiLog>
  </div>
</template>

<script>
import BiLog from '@/components/BiLog/index.vue';
import { partnerList, partnerSave, getTokenById, getDistSecret, distributorStatus } from '@/api/cooperate.js';
import AddCooperateVue from '../components/AddCooperate.vue';

export default {
  components: { BiLog },
  data() {
    return {
      AddCooperateVue,
      loading: false,
      tableData: [],
      isSetRemarkId: '',
      tableColums: [
        {
          label: 'ID',
          prop: 'partner_id',
        },
        {
          label: '合作方类型',
          prop: 'type',
          slotScope: true,
        },
        {
          label: '名称',
          prop: 'name',
          width: 500,
          slotScope: true,
        },
        {
          label: '简称',
          prop: 'short_name',
        },
        {
          label: '登录账号',
          prop: 'account',
          slotScope: true,
        },
        {
          label: '创建人',
          prop: 'operator',
        },
        {
          label: '创建时间',
          prop: 'create_time',
        },
        {
          label: '状态',
          prop: 'status',
          slotScope: true,
        },
        {
          label: '操作',
          prop: 'zip',
          width: 120,
          slotScope: true,
        },
      ],
      formData: {
        name: '',
        type: '1',
      },
      optionsList: {
        miniApp: [],
      },
      page_info: {
        total: 0,
        page: 1,
        page_size: 20,
      },
      drawer: {
        visible: false,
        title: '',
        row: {},
      },
      log_info: {
        id: '',
        visible: false,
        row: {},
      },
    };
  },
  mounted() {
    this.onGetList();
  },
  methods: {
    async ondistributorStatus(id, status) {
      const res = await distributorStatus({ id, status });
      if (res.status_code === 1) {
        this.$message.success('状态改变成功');
      }
    },
    async oncopy(row) {
      const res = await getDistSecret({ id: row.id });

      if (res.status_code === 1) {
        // input.hidden = true
        const str = `ID: ${res.data.id}\rSECRET: ${res.data.secret}`;
        const textareaEle = document.createElement('textarea');
        document.body.appendChild(textareaEle);
        // 2. 将需要复制的文本传入输入框, 并调用 select 方法, 选中输入框中文本
        textareaEle.value = str;
        textareaEle.select();
        textareaEle.readOnly = 'readOnly';
        // 3. 调用复制选中文本的方法
        document.execCommand('copy');
        // 4. 销毁输入框
        document.body.removeChild(textareaEle);
        this.$message.success('复制成功');
      }
    },
    onclose() {
      this.log_info.visible = false;
    },
    onEdit(row) {
      this.drawer = {
        visible: true,
        title: '编辑分销方',
        row,
      };
    },
    onLog(row) {
      this.log_info = {
        row,
        id: row.id,
        visible: true,
      };
    },

    onSetRemark(row) {
      this.isSetRemarkId = row.id;
    },
    async onlogin(row) {
      const res = await getTokenById({ id: row.id, type: 1 });
      if (res.status_code == 1) {
        if (res.data.code === -1) {
          this.$message.error(res.data.msg);
          return;
        }
        const zmiao =
          import.meta.env.MODE === 'production'
            ? 'https://zyudistribution.wozhangwan.com/#/sso'
            : ' https://zhangyu_dis.zwwlkj03.top/#/sso';
        const url = `${zmiao}?distributor_name=${res.data.data.partner_name}&token=${res.data.data.token}&username=${res.data.data.username}`;
        const a = document.createElement('a');
        a.target = '_blank';
        a.href = url;
        a.click();
      }
    },
    async onSaveRemark(name) {
      const res = await partnerSave({
        id: this.isSetRemarkId,
        type: [1],
        name,
      });
      if (res.status_code === 1) {
        this.isSetRemarkId = '';
        this.$message.success(res.msg);
        this.onGetList();
      }
    },
    onSubmit() {
      this.page_info.page = 1;
      this.onGetList();
    },
    handleReset() {
      this.formData.name = '';
    },
    add() {
      this.drawer = {
        visible: true,
        title: '新增分销方',
        row: { type: 1 },
      };
    },
    async onGetList() {
      this.loading = true;
      const res = await partnerList({
        ...this.formData,
        ...this.page_info,
      });
      if (res.status_code == 1) {
        this.tableData = res.data.data;
        this.page_info = res.data.page_info;
      }
      this.loading = false;
    },
    onSuccess() {
      this.onGetList();
    },
    handlePageChange(value) {
      this.page_info.page = value.page;
      this.onGetList();
    },
  },
};
</script>

<style lang="scss" scoped>
.setname {
  justify-content: left;
}
.status-drop-box {
  .edit-icon {
    opacity: 0;
    font-size: 16px;
    cursor: pointer;
    color: #06c021;
    margin-left: 5px;
  }
}
.content-outer {
  padding-top: 10px !important;
}
.tag-mark {
  transform: scale(120%);
}
.el-table--enable-row-hover .el-table__body tr:hover > td .status-drop-box .edit-icon {
  opacity: 1;
}
.hover-row .edit-icon {
  opacity: 1;
}
.set_remark:hover {
  color: #06c021;
  cursor: pointer;
}
.remark {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-all;
}
</style>
